<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'default',
		navigationBarBackgroundColor: '#F6F6F6',
		navigationBarTextStyle: 'black',
		backgroundColor: '#F6F6F6',
		navigationBarTitleText: '测练记录',
	},
}
</route>
<template>
	<view class="page-bookrack">
		<view class="w-full box-border" :style="{ height: contentHeight + 'rpx' }">
			<scroll-view class="w-full h-full" scroll-y>
				<view class="w-full px-4 py-4 box-border">
					<view class="bg-white rounded-[30rpx] px-4 py-4 box-border mb-4 last:mb-0">
						<view class="flex-1 box-border flex justify-between">
							<view class="flex-1 flex flex-col pr-2 box-border">
								<text class="text-[33rpx] font-bold text-[#303030] line-clamp-1">中国民间故事</text>
								<text class="text-[25rpx] text-[#303030] mt-2 line-clamp-1">中国民间故事</text>
								<view class="w-full flex items-center mt-2">
									<image
										:src="baseImg + '/record-start.png'"
										class="w-[34rpx] h-[34rpx] mr-1 last:mr-0"
									></image>
								</view>
							</view>
							<image
								class="w-[136rpx] h-[136rpx] rounded-[30rpx]"
								:src="baseImg + '/img-shangcixuedao.png'"
							></image>
						</view>
						<view class="w-full flex justify-between items-center mt-2">
							<text class="text-[#5E5E5E] text-[25rpx]">2023.12.4 14:13</text>
							<view
								class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] w-[136rpx] flex justify-center items-center"
								:style="{ background: '#48C855' }"
								>开始学习</view
							>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { systemInfo } from '@/utils/getSystemInfo';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const { contentHeight } = systemInfo();
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.page-bookrack {
	width: 100%;
	height: 100vh;
}
</style>
